<template>
  <o-modal
    v-model="isShow"
    :title="config.modalTitle"
    :size="config.modalSize"
    :mask="true"
    :tap-close="false"
    :show-footer="true"
    @on-ok="searchOk"
    @on-close="searchClose"
  >
    <div slot="content" class="searchbox clear">
      <div class="step" v-if="!$srv.utils.isEmpty(data)">
        <div
          v-for="(el, idx) in data"
          :key="idx"
          :class="['step-item', isStatus(el['_audited_']) ? '' : 'active']"
        >
          <div class="step-t clear">
            <p class="user">
              <i class="ivu-icon ivu-icon-md-person"></i
              >{{ isName(el.title, el.userName) }}
            </p>
            <p class="date" v-if="el.FCheckTime">
              <i class="ivu-icon ivu-icon-md-time"></i>{{ el.FCheckTime }}
            </p>
          </div>

          <div class="step-b">
            <p v-if="el.remark">{{ el.remark }}</p>
          </div>

          <!-- <span class="title" v-if="isStatus(el.FStatus)">未审核</span>
          <span class="title" v-else>已审核</span> -->
          <span class="title" v-if="isStatus(el['_audited_'])">
            {{ $srv.getI18nByPath('vxe.modal.notreviewed') }}
          </span>
          <span class="title" v-else>
            {{ $srv.getI18nByPath('vxe.modal.reviewed') }}
          </span>
        </div>
      </div>
      <!-- <div class="step-no" v-else>暂无审核记录...</div> -->
      <div class="step-no" v-else>
        {{ $srv.getI18nByPath('vxe.modal.noauditrecord') }}
        ...
      </div>
    </div>
  </o-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import oModal from '@/components/base/modal/o-modal/index.vue';
import { Tsrv } from '@/services';

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  rowId: string;
}

interface data {
  title: string;
  userName: string;
  FCheckTime?: string;
  remark?: string;
  _audited_: number;
  FSortNO: number;
  FBillNO?: string;
  FSendDate?: string;
  FBillID?: number;
  roleType?: number;
  objID?: number;
}

@Component({
  components: {
    oModal
  }
})
export default class oAuditMap extends Vue {
  // modify by wiz
  public compName: string = 'oAuditMap';

  @Prop() config: config;

  @Prop() id: string;

  private isShow: boolean = false;

  private data: Array<data> = [];

  get isStatus() {
    return status => {
      return status === 0;
    };
  }

  get isName() {
    return (title, userName) => {
      return userName || title;
    };
  }

  created() {
    this.initData();
  }

  mounted() {
    this.show();
  }

  public initData() {
    const params: any = {
      rowId: this.config.rowId
    };
    // 废弃（现已无用）
    Tsrv.httpReqV1.getAuditMap(params).then(res => {
      if (res.data.success) {
        this.data = res.data.data;
        this.data.forEach(el => {
          el.FCheckTime = Tsrv.utils.toDateString(
            el.FCheckTime,
            'yyyy-MM-dd HH:mm'
          );
        });
      } else {
        this.$msg(res.data.msg);
      }
    });
  }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.$bus.$emit(`modal_${this.id}`);
    this.isShow = false;
  }

  public searchOk() {
    this.$bus.$emit(`modal_${this.id}`, this.id);
    this.hide();
  }

  public searchClose() {
    this.hide();
  }
}
</script>

<style lang="scss" scoped>
$redColor: #ed4014;
$blueColor: #2d8cf0;
$yellowColor: #ff9900;
$greyColor: #c5c8ce;
$circleLength: 16px;
.searchbox {
  padding: 0 20px;
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 6px;
    background: #f5f5f5;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track-piece {
    background: #fff;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #b1b1b1;
    border-radius: 6px;
  }
  .step {
    position: relative;
    padding-top: 10px;
    .step-item {
      padding: 0px 0 20px 100px;
      position: relative;
      // &::before {
      //   content: "";
      //   width: $circleLength;
      //   height: $circleLength;
      //   position: absolute;
      //   top: 0;
      //   left: -$circleLength/2;
      //   border-radius: 50%;
      //   background-color: $greyColor;
      // }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 40px;
        width: 1px;
        height: 100%;
        background-color: $greyColor;
      }
      .step-t {
        font-size: 14px;

        p {
          margin-right: 15px;
          i {
            margin-right: 3px;
          }
          &.user {
            float: left;
            i {
              color: $blueColor;
            }
          }
          &.date {
            float: right;
            i {
              color: $yellowColor;
            }
          }
        }
      }

      .step-b {
        margin-top: 5px;
        background-color: #f3f3f3;
        border-radius: 6px;
        p {
          padding: 5px 10px;
          font-size: 12px;
          color: #797979;
          margin-bottom: 10px;
        }
      }

      .title {
        position: absolute;
        top: 0;
        left: 0;
        background-color: $greyColor;
        color: #fff;
        width: 80px;
        text-align: center;
        border-radius: 10px;
        font-size: 12px;
        line-height: 24px;
        z-index: 2;
      }

      &.active {
        &::before,
        &::after {
          background-color: $blueColor;
        }
        .title {
          background-color: $blueColor;
        }
      }
    }
    .step-item:nth-last-of-type(1) {
      &::after {
        display: none;
      }
    }
  }
  .step-no {
    text-align: center;
    margin-top: 20px;
  }
}
::v-deep .footer {
  padding-top: 7px;
  border-top: 1px solid #eaeaea;
}
</style>
